<template>
  <div class="model-container">
    <div class="listName">商品列表</div>
    <!--搜索-->
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" border empty-text="该客户还没办会员卡" @selection-change="changeFun">

          <el-table-column align="center" prop="cardType" label="会员卡名称"/>

          <el-table-column align="center" prop="endTime" label="到期时间"/>

          <el-table-column align="center" prop="endNumber" label="剩余次数"/>

          <el-table-column align="center" prop="discount" label="享受折扣"/>

          <el-table-column align="center" prop="remark" label="备注" />

          <el-table-column align="center" prop="name" label="会员卡类型"/>

        </el-table>
        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
  </div>
</template>

<script>
  import * as commoditys from '../../api/commoditys'
  import * as userMessage from '../../utils/auth'
  import ImageCropper from '@/components/ImageCropper'
  import {isvalidNull, validatePhone} from "../../utils/validate";
  import * as member from "../../api/member";

  export default {
    components: {
      ImageCropper
    },
    data() {
      return {
        button:true,
        sid:'',
        neid:'',
        number:0,
        // 页面搜索
        seacherParam: {
          searchMessage: ''
        },
        searchShow: false,
        pageNo: 1,
        pageSize: 10,
        rowCount: null, // 总条数
        // 弹框
        dialogType: 1, // 1--增加  2--编辑  3--查看
        dialogState: false,
        // 按钮状态
        buttonState: false,
        // 列表数据
        dataOption: null,
        datavalID: [],
        // 提交内容
        type: '',

        dialogBindData: {
          sid:'',
          remake:'',
          name:'',
          total:'',
          total1:'',
          shopName:'',
          count:'',
          nscid:'',
        },
        rules: {

        },
        sc:'',
        // 上传头像
      }
    },
    computed: {

    },
    beforeMount() {
      if(!this.$route.params.data){
        this.$router.push({
          path: '/login',
        })
      }else{
        console.log(this.$route.params.data)
        this.getOrderList(this.$route.params.data)
      }
    },
    created() {
      this.initUploadFileurl()
    },
    methods: {
      initUploadFileurl() {
        this.actionUrl = process.env.BASE_API + 'file/uploadImageAndCrtThumbImagesRichEdit'
      },

      getOrderList(data) {

        const param = {
          nmId:data.nmId
        }
        commoditys.checkMessage(param).then(res=>{

          commoditys.getVipMessage1(param).then(res => {
            //console.log(res)
            if (res.data.code !== 1) {
              this.$message.error(res.data.msg)
              return false
            }
            if (res.data.data === 'null' || res.data.data === null) {
              return false
            }
            // 初始话表格数据
            this.dataOption = res.data.data
            // 初始化分页数据
            console.log(res)
            this.rowCount = res.data.count
            this.pageSize = res.data.size
          })
        })
      },

      changeFun(data) {
        this.datavalID = data
      },
      // 反显
      reBindData(data) {
        for (const key in this.dialogBindData) {
          this.dialogBindData[key] = data[key]
        }
      },
      // 搜索过滤
      searchData() {
        const arr = []
        for (const key in this.seacherParam) {
          if (this.seacherParam[key] !== '') {
            arr.push('&' + key + '=' + this.seacherParam[key])
          }
        }
        const url = arr.join('')
        return url
      },
      // 重置
      resetFun() {
        this.$refs.seacherParam.resetFields()
        this.pageNo = 1
        this.pageSize = 10
        this.getOrderList()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getOrderList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNo = val
        this.getOrderList()
      },
      handleClose() {
        for (const key in this.dialogBindData) {
          this.dialogBindData[key] = ''
        }
        this.type = ''
        this.dialogState = false
        this.$refs.dialogBindData.clearValidate()
      },
      // 上传头像
      cropSuccess(resData) {
        this.imagecropperShow = false
        this.imagecropperKey = this.imagecropperKey + 1
        this.picUrl = resData.data[0].maxImageUrl
      },
      close() {
        this.imagecropperShow = false
      },
      memberCat(data) {
        this.$router.push({
          name: '/v1/membercar',
          params: {
            data: data
          }
        })
      },
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  .uploadImg{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    /*border: 1px dashed #dcdfe6;*/
    img{
      display: block;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
    .uploadImg_mock{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(0,0,0,0);
      transition:background-color 0.35s;
      -webkit-transition: background-color 0.35s;
      i{
        position: absolute;
        top: 50%;
        left: 50%;
        color: #fff;
        font-size: 26px;
        margin-left: -12px;
        margin-top: -16px;
        opacity: 0;
        transition:opacity 0.35s;
        -webkit-transition: opacity 0.35s;
      }
    }
    &:hover .uploadImg_mock{
      background-color: rgba(0,0,0,0.5);
      i{
        opacity: 1;
      }
    }
  }

</style>
